<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--by qikran-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="菜单行为">
    <meta name="description" content="菜单行为">
    <title>菜单行为</title>
    <link rel="shortcut icon" href="../../static/favicon.ico" th:href="@{/static/favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"
          th:href="@{/static/css/bootstrap.min.css(v=3.3.6)}">
    <link href="../../static/css/font-awesome.css?v=4.4.0" rel="stylesheet"
          th:href="@{/static/css/font-awesome.css(v=4.4.0)}">
    <link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"
          th:ref="@{/static/css/plugins/bootstrap-table/bootstrap-table.min.css}">
    <link href="../../static/css/plugins/treegrid/jquery.treegrid.css" rel="stylesheet"
          th:ref="@{/static/css/plugins/treegrid/jquery.treegrid.css}">
    <link href="../../static/css/animate.css" rel="stylesheet" th:href="@{/static/css/animate.css}">
    <link href="../../static/css/style.css?v=4.1.0" rel="stylesheet" th:href="@{/static/css/style.css(v=4.1.0)}">
    <style>
        th{
            color:#2a62bc;
        }
    </style>
</head>
<body class="gray-bg">
<div class="ibox-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="animated fadeInRight">
                    <table id="menuActionTable">
                    </table>
            </div>
        </div>
    </div>
</div>
<!--分配角色模态窗-->
<div class="modal fade" id="allocate" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- 模态框头部定义 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">分配行为</h4>
            </div>
            <!--体部定义-->
            <div class="modal-body">
                <div class="row form-horizontal">
                    <div class="form-group  has-feedback">
                        <input type="text" id="menuId" value="1" th:value="" hidden>
                        <label class="col-md-2 control-label" readonly="">菜单名称:</label>
                        <div class="col-md-6">
                            <input type="text" name="userGroupName" class="form-control" readonly value="" th:value="">
                        </div>
                        <div class="col-md-offset-1 col-md-2">
                            <label class="control-label" tip="name"></label>
                        </div>
                    </div>
                    <!--树形复选框-->
                    <div class="form-group">
                        <label class="col-md-2 control-label">包含行为:</label>
                        <div class="col-md-6">
                            <div id="menuTree" style="overflow-y:scroll;height: 300px"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" id="btnAllocate" class="btn btn-primary">保存</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script src="../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v=2.1.4)}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v=3.3.6)}"></script>
<script src="../../static/js/plugins/treegrid/bootstrap-table.min.js"
        th:src="@{/static/js/plugins/treegrid/bootstrap-table.min.js}"></script>
<script src="../../static/js/plugins/treegrid/bootstrap-table-treegrid.min.js"
        th:src="@{/static/js/plugins/treegrid/bootstrap-table-treegrid.min.js}"></script>
<script src="../../static/js/plugins/treegrid/jquery.treegrid.min.js"
        th:src="@{/static/js/plugins/treegrid/jquery.treegrid.min.js}"></script>
<script src="../../static/js/plugins/treeview/bootstrap-treeview.min.js"
        th:src="@{/static/js/plugins/treeview/bootstrap-treeview.min.js}"></script>
<!--自定义JS 初始化树形复选框-->
<script src="../../static/public/privilege/menuAction_treeCheckBox.js"
        th:src="@/static/public/privilege/menuAction_treeCheckBox.js"></script>
<script>
    $(function () {
        let $menuTree = $("#menuTree");
        /*初始化树形复选框（在外部JS中）;*/
        initCheckTree($menuTree);
        let $menuActionTable = $('#menuActionTable');
        $menuActionTable.bootstrapTable({
            url: '../../static/js/demo/privilege/menuAction_gridTree_test.json',
            striped: true,
            mobileResponsive: true,
            idField: 'id',
            columns: [
                {
                    field: 'menuName',
                    title: '菜单名称'

                },
                {
                    field: 'url',
                    title: '菜单URL'
                }, {
                    field: 'operate',
                    title: '操作',
                    width: '300',
                    events: operateEvents,
                    formatter: 'operateFormatter'
                }

            ],
            //在哪一列展开树形
            treeShowField: 'menuName',
            //指定父id列
            parentIdField: 'pid',
            onResetView: function (data) {
                $menuActionTable.treegrid({
                    //initialState: 'collapsed',// 所有节点都折叠
                    initialState: 'expanded',// 所有节点都展开，默认展开
                    treeColumn: 0,//指定哪列 有树形结构
                    expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                    expanderCollapsedClass: 'glyphicon glyphicon-plus',
                });
            },


        });


        /*分配行为模态窗想后台传送数据*/
        $("#btnAllocate").click(function () {
            let menuId=$("#menuId").val();
            let datas = [];
            let checks = $menuTree.treeview('getChecked');
            $.each(checks, function (index, item) {
                if (item.parentId!=undefined){
                    datas.push(item.tags);}
            });
            console.log(datas);
            let s={"id":menuId,"action":datas};
            s=JSON.stringify(s);
            console.log(s);
            if (datas==0){
                alert("至少选中一个")
            } else {
                if (confirm("确定添加这些数据么")) {
                    alert("添加数据:" + s);
                    window.location.reload();
                    //ajax发送异步请求
                    /*$.ajax({
                        url:  appName,
                        method: "post",
                        data: s,
                        dataType: "text",
                        async: "true",
                        contentType: "application/json",
                        success: function (data) {
                            /!*重新加载本页面*!/
                            alert(data);
                            window.location.reload();
                        },
                        error: function (jqXRH) {
                            console.log(jqXRH);
                            alert("删除失败")
                        }
                    })*/}
            }
        })

    });

    // 格式化按钮
    function operateFormatter(value, row, index) {
        console.log();
        let va;
        if (row.pid !== 0) {
            /*console.log("打印"+"pid:"+row.pid)*/
            va = ['<button class="btn btn-white" value="' + row.index + '" type="button" data-toggle="tooltip" data-placement="bottom" title="预置行为分配"><i class="glyphicon glyphicon-edit"/> </button>']
        }
        return va
    }
    //给动态按钮绑定事件
    window.operateEvents = {
        'click .btn.btn-white': function (e, value, row, index) {
            $("#allocate").modal();
        }
    };

</script>

</body>
</html>